<template>
  <div class="main-content">
    <div>
      <el-row :gutter="10">
        <el-col :span="6" v-for="item in serveList" :key="item.id">
          <div class="card" style="margin: 10px 0px; font-size: 18px; color: rgb(51, 51, 51);">
            <img :src="item.cover" alt="" style="width: 100%; height: 150px"><!---->
            <div style="margin: 5px 0">{{ item.name }}</div>
            <div style="margin-bottom: 10px; color: #666; font-size: 13px">{{ item.descr }}</div>
            <div style="text-align: right">
              <el-button type="primary" @click="addReserve(item.id)">预约服务</el-button>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
export default {
  name: "FrontServe",
  data() {
    return {
      serveList: [],
      user: JSON.parse(localStorage.getItem('xm-user') || '{}')
    }
  },
  created() {
    this.load()
  },
  methods: {
    addReserve(serveId) {
      this.$request.post('/reserve/add', { serveId: serveId, userId: this.user.id }).then(res => {
        if (res.code === '200') {
          this.$message.success('预约成功')
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    load() {
      this.$request.get('/serve/selectAll').then(res => {
        this.serveList = res.data || []
      })
    }
  }
}
</script>

<style scoped>

</style>